import React from 'react'
import './index.css';
export default class Footer extends React.Component {

    countOccurrences = () => {
        let num = this.props.todoList.reduce((acc, cur) => {
            return cur.isCheck === true ? acc + 1 : acc + 0
        }, 0)
        return num
    }
    onChange=(e)=>{
        this.props.checkAll(e.target.checked)
    }
    render () {
        return (
            <div className="footer">
                <input type="checkbox" ref={(e) => { this.checkAllInput = e }} checked={this.countOccurrences() === this.props.todoList.length ? true : false} onChange={this.onChange} />&nbsp;<span>全选</span>&nbsp;&nbsp;
                <span>当前{this.countOccurrences()}/总共{this.props.todoList.length}</span><button onClick={this.props.clearAllDone}>清空所有完成</button>
            </div>
        )
    }
}